<template>
  <div class="page invite-index">
    <!--<div class="index-top-banner" @click="doTalents"></div>-->
    <el-carousel class="index-top-banner" height="550px">
      <el-carousel-item class="index-top-banner" v-for="(t,i) in banners" :key="i">
        <img @click="toBanner(t.url)" :src="t.image" alt class="index-top-banner">
      </el-carousel-item>
    </el-carousel>
    <div class="invite-serve invite-page">
      <div class="invite-page-center">
        <div class="invite-title">我们的服务</div>
        <div class="invite-title-line"></div>
        <div class="invite-serve-content">
          <el-col :span="8">
            <div class="serve-all">
              <div class="serve-circle serve-safety"></div>
              <div class="serve-text">更安全</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="serve-all">
              <div class="serve-circle serve-major"></div>
              <div class="serve-text">更专业</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="serve-all">
              <div class="serve-circle serve-convenient"></div>
              <div class="serve-text">更便捷</div>
            </div>
          </el-col>
        </div>
      </div>
    </div>
    <div class="invite-famous-enterprise">
      <div class="invite-title">3000家优质企业已经入驻，你还在等吗</div>
      <div class="invite-title-line"></div>
      <div class="invite-famouse-enterprise">
        <el-row class="famouse-enterprise-row">
          <div v-for="(t,i) in companies" :key="i" class="famouse-list">
            <!--<img :src="t.image" height="67px" width="195px" alt>-->
            <img :src="t.image" height="100%" width="100%" alt>
          </div>
        </el-row>
      </div>
    </div>

    <div class="invite-cooperation-flow">
      <div class="invite-title">合作流程</div>
      <div class="invite-title-line"></div>
      <div class="invite-cooperation-flow-content">
        <div class="invite-cooperation-flow-center">
          <div class="cooperation-flow-center-line"></div>
          <div class="cooperation-flow-center-top">
            <div class="cooperation-circle-group">
              <div class="text">发布职位</div>
              <div class="cooperation-circle circle-position"></div>
            </div>
            <div class="cooperation-circle-group">
              <div class="text">签约协议</div>
              <div class="cooperation-circle circle-agreement"></div>
            </div>
            <div class="cooperation-circle-group">
              <div class="text">人才评估</div>
              <div class="cooperation-circle circle-talents"></div>
            </div>
            <div class="cooperation-circle-group">
              <div class="text">面试offer</div>
              <div class="cooperation-circle circle-offer"></div>
            </div>
            <div class="cooperation-circle-group">
              <div class="text">确认付款</div>
              <div class="cooperation-circle circle-payment"></div>
            </div>
          </div>
          <div class="cooperation-flow-center-bottom">
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-message"></div>
              <div class="text">注册信息</div>
            </div>
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-check"></div>
              <div class="text">信息审核</div>
            </div>
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-report"></div>
              <div class="text">推荐报告</div>
            </div>
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-communication"></div>
              <div class="text">申请沟通</div>
            </div>
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-entry"></div>
              <div class="text">入职到岗</div>
            </div>
            <div class="cooperation-circle-group">
              <div class="cooperation-circle circle-guarantee"></div>
              <div class="text">过保证期</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="invite-describe"></div>
    <div class="invite-footer invite-page">
      <div class="invite-page-center" style="position: relative;left: -20px">
        <el-row>
          <el-col :span="7">
            <div class="footer-text">
              <div class="footer-title">注册工程师人才</div>
              <div class="footer-phone">{{conactOur.phone}}</div>
              <div>工作时间：{{conactOur.workTime}}</div>
              <div>企业服务邮箱：{{conactOur.comEmail}}</div>
              <div>{{conactOur.comAddrees}}</div>
            </div>
          </el-col>
          <el-col :span="5" class="footer-text-center">
            <div class="footer-text">
              <div class="footer-title">关于我们</div>
              <div
                @click="clickAboutOur(item)"
                v-for="item in abourtOur"
                class="footer-text-button"
              >{{item.title}}</div>
            </div>
          </el-col>
          <el-col :span="6" class="footer-text-center">
            <div class="footer-text">
              <div class="footer-title">帮助中心</div>
              <div
                @click="clickHelpCenter(item)"
                v-for="item in helpCenter"
                class="footer-text-button"
              >{{item.title}}</div>
            </div>
          </el-col>
          <el-col :span="6" class="footer-img">
            <div class="footer-img-list">
              <img :src="conactOur.codeImage1" alt>
              <div>{{conactOur.codeName1}}</div>
            </div>

            <div class="footer-img-list" style="position: relative;left: 46px">
              <img :src="conactOur.codeImage2" alt>
              <div>{{conactOur.codeName2}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="footer-link">
          <span>友情链接：</span>
          <a
            v-for="(t,i) in links"
            :key="i"
            :href="t.url"
            target="_Blank"
            style="margin-left: 15px"
          >{{t.name}}</a>
        </el-row>
      </div>
    </div>
    <el-row class="footer-versions" style="margin-left: -20px">
      <div>&copy;2019 注册工程师人才网鄂ICP备12010182号-8</div>
      <a
        style="display:flex;align-items:center;margin-left:30px;text-decoration: none;color:#A9A9A9"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502003914"
      >
        <img src="@/assets/img/index/beian.png" alt>
        <span>鄂公网安备 42018502003914号</span>
      </a>
      <div style="display: flex;align-items: center;margin-left:30px;">
        <img src="../../assets/img/index/buliang.png" alt>
        <span>违法和不良信息举报电话：027-65022400&nbsp;邮箱：gcs360@zddhr.com</span>
      </div>
    </el-row>
  </div>
</template>

<script>
import _subject from '../../assets/utils/subject'
import * as _ from 'underscore'
import * as qs from 'qs'

export default {
  name:'index-index',
  data() {
    return {
      banners: [],
      companies: [],
      links: [],
      conactOur: {},
      abourtOur: [],
      helpCenter: []
    }
  },
  methods: {
    toBanner(url) {
      if (url.indexOf('//') == -1) {
        window.open('//' + url, '_blank')
      } else {
        window.open(url, '_blank')
      }
    },
    clickHelpCenter(t) {
      this.$router.push({ path: t.to })
    },
    clickAboutOur(t) {
      this.$router.push({ path: t.to })
    },
    doTalents() {
      console.log('跳转到人才端页面')
    }
  },
  components: {},
  created() {
    let self = this
    _subject.loadStatic('8,9,44,20,45,46', function(o) {
      _subject.log('first statics', o)
      //首页banner
      self.banners = _.map(o[8], function(t) {
        let content = JSON.parse(t.content)
        return {image:content.image,url:content.url}
      })

      //合作公司
      self.companies = _.map(o[9], function(t) {
        return JSON.parse(t.content)
      })

      //友情链接
      self.links = _.map(o[44], function(t) {
        return JSON.parse(t.content)
      })
      //联系我们
      _.map(o[20], function(t) {
        self.conactOur = JSON.parse(t.content)
      })
      //关于我们
      self.abourtOur = _.map(o[45], function(t) {
        return JSON.parse(t.content)
      })

      //帮助中心
      self.helpCenter = _.map(o[46], function(t) {
        return JSON.parse(t.content)
      })
    })
  }
}
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}

a:hover {
  color: #f09338;
}

.index-top-banner {
  background: white no-repeat center;
  background-size: cover;
}

.serve-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
}

.invite-describe {
  width: 100%;
  height: 478px;
}

.serve-safety {
  background: #f7f7f7 url('../../assets/img/index/anquan.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/index/anquan1.png') no-repeat
      center;
  }
}

.serve-major {
  background: #f7f7f7 url('../../assets/img/index/zhuanye.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/index/zhuanye1.png') no-repeat
      center;
  }
}

.serve-convenient {
  background: #f7f7f7 url('../../assets/img/index/bianjie.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/index/bianjie1.png') no-repeat
      center;
  }
}

.invite-describe {
  width: 100%;
  height: 478px;
  background: url('../../assets/img/index/footer-banner.png') no-repeat center;
}

.cooperation-flow-center-line {
  position: absolute;
  top: 105px;
  left: 0;
  width: 1200px;
  height: 200px;
  background: url('../../assets/img/index/line.png') no-repeat center;
  z-index: 2;
}

.circle-message {
  background: #fff url('../../assets/img/indexs/zhuce.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/zhuce1.png') no-repeat
      center;
  }
}

.circle-position {
  background: #fff url('../../assets/img/indexs/fabu.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/fabu1.png') no-repeat
      center;
  }
}

.circle-check {
  background: #fff url('../../assets/img/indexs/shenhe.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/shenhe1.png') no-repeat
      center;
  }
}

.circle-agreement {
  background: #fff url('../../assets/img/indexs/qianyue.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/qianyue1.png') no-repeat
      center;
  }
}

.circle-report {
  background: #fff url('../../assets/img/indexs/tuijian.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/tuijian1.png') no-repeat
      center;
  }
}

.circle-talents {
  background: #fff url('../../assets/img/indexs/rencai.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/rencai1.png') no-repeat
      center;
  }
}

.circle-communication {
  background: #fff url('../../assets/img/indexs/goutong.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/goutong1.png') no-repeat
      center;
  }
}

.circle-offer {
  background: #fff url('../../assets/img/indexs/mianshi.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/mianshi1.png') no-repeat
      center;
  }
}

.circle-entry {
  background: #fff url('../../assets/img/indexs/ruzhi.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/ruzhi1.png') no-repeat
      center;
  }
}

.circle-payment {
  background: #fff url('../../assets/img/indexs/fukuan.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/fukuan1.png') no-repeat
      center;
  }
}

.circle-guarantee {
  background: #fff url('../../assets/img/indexs/baozhen.png') no-repeat center;

  &:hover {
    background: #f09338 url('../../assets/img/indexs/baozhen1.png') no-repeat
      center;
  }
}
.footer-phone {
  font-size: 20px;
  font-weight: bold;
  color: #f09338;
}
.footer-text-button {
  cursor: pointer;
  &:hover {
    color: #f09338;
  }
}
</style>
